<template>
  <!-- 质量管理工作月报详情 -->
  <base-breadcrumb :title="`${year}年${Number(month) + 1}月质量管理月报信息`">
    <!-- 搜索 -->
    <a-card :bordered="false" style="margin-bottom: 20px">
      <div class="flex" style="justify-content: space-between;">
        <title-name :title="`${year}年${month}月质量管理月报信息`" />
        <a-button v-if="dataLoaded" v-btn-permission="'qm_053_exp_06'" :loading="exportLoading" @click="exportWord">{{ '导出' + $route.query.month + '质量管理月报' }}</a-button>
      </div>
      <a-row :gutter="10">
        <!-- 侧边栏 -->
        <a-col :span="6" style="border-right: 1px solid #d9d9d9; overflow-x: auto;">
          <!-- 树搜索 -->
          <!-- :initExpandAll="false"  不展开 -->
          <tree
            style="max-height: calc(100vh - 280px);min-height: 300px;overflow-y: auto;"
            :checkedKeys="checkedKeys"
            ref="tree"
            :checkable="editModel == 5"
            :draggable="draggable"
            :show-button="false"
            :autoSelect="false"
            showChildWithSearch
            :selected-keys.sync="selectedKeys"
            :select-options.sync="selectOptions"
            is-all
            :treeData.sync="treeData"
            @loader="search"
            @check="(e) => (checkedKeys = e)"
            @getData="getData"
          >
          </tree>
          <!-- 操作栏 -->
          <a-row type="flex" justify="space-around">
            <!-- 填报或者上报或者调整时 -->
            <a-button :disabled="!checkedKeys.length" v-if="editModel == 5" type="primary" @click="handlePublish">发布</a-button>
            <!-- 节点管理时 -->
            <template v-if="editModel == 1">
              <a-button type="primary" :loading="saveLoading" @click="handleDrag">{{ draggable ? '保存节点' : '开始拖拽节点' }}</a-button>
            </template>
          </a-row>
        </a-col>
        <!-- 主内容 -->
        <a-col :span="18">
          <a-card  :style="'height: calc('+GET_REDRESS_PERCENTAGE+'vh - 256px); overflow: auto; margin: 0'">
            <component :key="selectOptions.id" ref="content" :is="component" @submitLoading="submitLoading" :queryParam="queryParam" @refreshTree="$refs.tree.getList()" @switchLoading="loading = !loading"></component>
            <Empty v-if="!component" description="暂无数据" />
          </a-card>
        </a-col>
      </a-row>
    </a-card>
    <div class="tool-btns--fixed page-btn-right-top">
      <a-button v-if="showSubmit" type="primary" :loading="loading" @click="$refs.content && $refs.content.handleSubmit()">提交</a-button>
      <a-button class="ml12" v-if="checkVisibleInDetail" @click="handleActiveClose">关闭</a-button>
    </div>
  </base-breadcrumb>
</template>

<script>
import Tree from './components/Tree' // 树
import { Empty } from 'ant-design-vue' // 无数据提示
// import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BasePage from '@/views/basePage'
import { updateTree, publish } from '@/api/quality/qualityMonth' // api
import { monthexportyearMonth } from '@/api/quality/qualityMonth/qualityManagementInfo'
import {mapGetters } from 'vuex'
export default {
  name: 'a' + Date.now(),
  extends: new BasePage(),
  components: {
    Empty,
    Tree
  },
  created() {
    let to = this.$route // 当前路由
    Object.assign(this, to.query)
  },
  mounted() {
    this.$refs.tree.getList().then(() => {
      // 设置默认选中树节点
      let treeSearch = this.$refs.tree.$refs.treeSearch // 搜索组件
      let option = treeSearch?.treeData?.[0]?.children[0] // 需要默认选中的节点对象
      // 映射节点选中
      treeSearch.selectedKeys = [option.id]
      treeSearch.selectOptions = option
      this.dataLoaded = true
    })
  },
  computed: {
    ...mapGetters(['GET_REDRESS_PERCENTAGE']),
    // 传给组件的参数集合
    queryParam() {
      let args = { branchComId: this.selectOptions.code, parentName: this.selectOptions.parent,  branchComIds: [], monthTime: this.monthTime, type: this.selectOptions.type, nodeName: this.selectOptions.name, isLook:this.isLook,isRelease: this.status == 2 }
      // 当不是分公司质量业务经理，公司质量业务经理时要取节点下所有分公司id
      console.log(this.selectOptions)
      let children = this.selectOptions.children || this.selectOptions.dataRef?.children
      if ((this.selectOptions?.dataRef?.children?.length || this.selectOptions?.children?.length)) {
        // 遍历节点下所有子级，添加所有拥有分公司id到列表
        const flatTree = (list) => {
          for (let item of list) {
            if (item.code) {
              if (args.branchComIds?.length > 0) {
                args.branchComIds.push(item.code)
              } else {
                args.branchComIds = []
                args.branchComIds.push(item.code)
              }
            }
            if(item.children?.length){
              flatTree(item.children)
            }
          }
        }
        flatTree(children)
      }
      return args
    },
    // 根据树节点渲染不同的组件
    component() {
      /**
       * 节点对象字段type；以下为type字典列表
       * 0: 质量检查情况
       * 1: 月度样板引路情况
       * 2: 项目实测实量检查排名
       * 2.1: 砼结构实测实量
       * 2.2: 砌体工程实测实量
       * 2.3: 抹灰工程实测实量
       * 2.4: 机电安装工程实测实量
       * 2.5: 道路工程实测实量
       * 2.6: 第三方实测实量
       * 3: 工程品质专项治理检查排名
       * 3.1: 回填土专项治理
       * 3.2: 工程防渗漏专项治理
       * 3.3: 混凝土观感专项
       * 3.4: 管线综合专项治理
       * 3.5: 基础设施六项治理—沥青路面
       * 3.6: 机电安装四项治理—支吊架
       * 3.7: 机电安装四项治理—水电井
       * 3.8: 机电安装四项治理—设备机房
       * 3.9: 机电安装四项治理—末端设备
       * 3.10: 基础设施六项治理—砼指标
       * 3.11: 基础设施六项治理—管廊防水
       * 3.12: 基础设施六项治理—灌注桩桩头超灌
       * 3.13: 基础设施六项治理—桥梁及墩身混凝土观感
       * 3.14: 基础设施六项治理—三背回填
       * 4: 工程品质提升新六项措施实施情况
       * 5: 质量处罚情况
       * 6: “质量工匠之星”活动开展情况
       * 7: 分公司工作计划
       * 8: 公司技术质量部工作计划
       * 9.2:¸附表2：新六项措施存在的问题
       * 9.3:¸附表3：项目亮点照片
       * 9.4: 附表4：“质量工匠之星”亮点做法及表彰公示
       */
      let nodeId = this.selectOptions.type // 因为父子节点共用一个组件，所以若是子节点，则子节点id向下取整得到用父节点id，用父节点id去检索组件类型，唯一的例外是type为9，也就是附表，它的根节点不可点击
      // 附表为9开头，附表二级为一位小数如9.1，9.2等直接找对应组件，附表第三级为类似9.1.1字符格式，需要对应附表二级，也就是取9.1
      nodeId = (nodeId > 9 || nodeId == '3.999') ? nodeId : Math.floor(nodeId) || nodeId?.substr(0, 3)

      let name = {
        '0': 'QualityCheckSituation', // 质量检查情况
        '1': 'MonthlyModelGuideSituation', // 月度样板引路情况
        '2': 'MeasurementInspectionRanking', // 项目实测实量检查排名
        '3': 'SpecialTreatment', // 工程品质专项治理检查排名
        '3.999': 'SpecialTreatment999', // 专项治理统计
        '4': 'SixMeasuresImplementation', // 工程品质提升新六项措施实施情况
        '5': 'QualityPenalty', // 质量处罚情况
        '6': 'CraftsmanStar', // “质量工匠之星”活动开展情况
        '7': 'WorkPlans', // 分公司工作计划
        '8': 'WorkPlans', // 公司技术质量部工作计划"
        '9.1': 'SpecialProblem', // 附表1：专项治理存在的问题
        '9.2': 'SixMeasuresProblem', // 附表2：新六项措施存在的问题
        '9.3': 'ProjectHighlightsPhotos', // 附表3：项目亮点照片
        "9.4": 'CraftsmanStarHighlights', // 附表4：“质量工匠之星”亮点做法及表彰公示
        "9.5": 'MainQualityRisks', // 附表5：主要质量风险
        "10": 'qualityManagementInfo', // 获取质量管理信息概览
        "10.0": 'qualityManagementInfo0', // 项目质量管理得分与排名
        "10.1": 'qualityManagementInfo1', // 实测实量统计
        "10.2": 'qualityManagementInfo2', // 专项治理统计
        "10.3": 'qualityManagementInfo3', // 质量风险评分统计
        "10.4": 'qualityManagementInfo4', // 质量罚款统计
        "10.5": 'qualityManagementInfo5', // 质量检查与整改统计
        "10.6": 'qualityManagementInfo6', // 重大及以上质量风险清单
        "11": 'QualityRiskAssessment', // 质量风险评价表
      }[nodeId] // 根据组件类型找到组件名称

      let component // 初始化组件变量
      // 若组件已缓存则直接使用，若没有则引入组件并缓存
      if (this.cacheComponents[name]) {
        component = this.cacheComponents[name]
      } else {
        // 同步引入对应组件
        component = name ? require(`./components/${name}`)?.default : ''
        name && (this.cacheComponents[name] = component)
      }

      return component
    },
    // 是否显示提交按钮
    showSubmit() {
      let nodeId = this.selectOptions.type
      nodeId = nodeId > 9 ? nodeId : Math.floor(nodeId) || nodeId?.substr(0, 3)
      if ((this.editModel == 2 || this.editModel == 4)) {
        if ((this.selectOptions.code && (nodeId === 7 || nodeId === 3 || nodeId == '9.5')) || nodeId === 8) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    }
  },
  data() {
    return {
      dataLoaded: false,
      exportLoading: false,
      checkedKeys: [], // 树节点复选集合
      treeData: [], // 树节点列表
      draggable: false, // 是否可拖拽
      loading: false, // 确认按钮加载
      saveLoading: false, // 保存按钮加载
      selectedKeys: [], // 选中节点id集合
      selectOptions: {}, // 选中节点业务对象
      cacheComponents: {} // 已缓存的节点组件字典
    }
  },
  methods: {
    submitLoading(val) {
      this.loading = val || false
    },
    /**
     * 切换拖拽
     */
    handleDrag() {
      if (this.draggable) {
        this.handleSaveTree()
      } else {
        this.draggable = true
        this.$message.info('请开始拖拽节点')
      }
    },
    /**
     * 保存节点树
     */
    handleSaveTree() {
      this.saveLoading = true
      updateTree(this.treeData[0])
        .then((res) => {
          if (res.code === '0') {
            this.draggable = false
            this.$message.success('保存节点成功！')
            this.$nextTick(() => {
              this.$refs.tree.getList()
            })
          }
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
    /**
     * 发布节点
     */
    handlePublish() {
      this.$confirm({
        title: '提示',
        content: '确认是否发布？',
        onOk: () => {
          return publish({
            id: this.id,
            nodeIds: this.checkedKeys
          }).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('发布成功！')
              this.$close()
            }
          })
        }
      })
    },
    /**
     * 搜索
     */
    search() {
      if (!this.selectOptions?.dataRef?.children?.length && !this.selectOptions?.code) {
        return
      }
      // 初始化组件
      !this.$refs.content?.loading && this.$refs.content?.init()
    },
    /**
     * 处理树的根节点和《附件》节点为不可选
     * data：树节点列表
     */
    getData(data) {
      data.selectable = false
      if (data?.children?.length) {
        data.children[data.children.length - 1].selectable = false
      }
    },
    /**
     * 判断业务详情中的组件是否需要显示
     */
      checkVisibleInDetail() {
      let { checkVisibleInDetail } = require('@/utils/util')
      return checkVisibleInDetail(this)
    },
    /**
     * 动态关闭
     */
      handleActiveClose() {
      this.isBack ? this.$router.go(-1) : (this.businessId ? window.close() : this.$multiTab.close())
    },
    exportWord() {
        this.exportLoading = true
        monthexportyearMonth({yearMonth: this.queryParam.monthTime})
        .then((res) => {
          if (res.data) {
            this.exportPointInfo([res.data], res.data.name)
          }
        })
        .finally(() => {
          this.exportLoading = false
        })
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .branchName {
  padding: 20px 0 12px;
  text-align: center;
  font-weight: bolder;
}
</style>